<template>
  <div class="members-box">
    <div class="box">
      <!-- 左侧的用户头像,用户信息等 -->
      <div class="left">
        <div class="head-img">
          <img class="img" src="https://pics2.baidu.com/feed/eaf81a4c510fd9f9d82f5abc7a6c722e2934a4f4.png?token=d1c63ace1b130a57b62e059d92ee3dc5&s=1906C3154F03444FD746FCC9030060B9" alt="" />
          <img class="icon" src="https://pics7.baidu.com/feed/3bf33a87e950352a008784db0c025df6b0118bc1.png?token=4b9225ea3fb76430a754ff307c0893bf&s=BC2A7033110D414F5CF5D5DA0300C0B1" alt="" />
        </div>
        <div class="info">
          <div class="top">
            <div class="name">{{ userInfo.name }}</div>
            <div class="status">
              <div v-if="userInfo.isMasterUser" class="text">主持人</div>
              <!-- 主讲图标 -->
              <img v-if="userInfo.isMasterSpeech" class="master-speech" src="@/assets/img/trtc/icon-speaker-popup.png" alt="" />
              <!-- 连麦图标 -->
              <img v-if="userInfo.connectSpeechStatus == 3" class="connect" src="@/assets/img/trtc/icon-mic-popup.png" alt="" />
            </div>
          </div>
          <div class="bottom">
            <div class="wechat-name">微信：{{ userInfo.weChatName }}</div>
            &nbsp;|&nbsp;
            <div class="work">{{ userInfo.work }}</div>
            &nbsp;|&nbsp;
            <div class="company">{{ userInfo.company }}</div>
          </div>
        </div>
      </div>
      <!-- 右侧的time,音视频图标等 -->
      <div class="right">
        <!-- 在线时长,当不在申请连麦状态中显示 -->
        <div class="on-time" v-if="userInfo.connectSpeechStatus !== 2">
          00:00:00
        </div>
        <!-- 如果用户类型是讲师,或者是主讲,或者是正在连麦的观众,或者是主讲 -->
        <div class="icon-list" :class="type != 1 ? 'opacity05' : ''" v-if="
            userRole == lecturer ||
            userInfo.isMasterSpeech ||
            userInfo.connectSpeechStatus == 3
          ">
          <img class="audio open" src="@/assets/img/trtc/icon-mute.png" alt="" v-if="userInfo.audio" />
          <img class="audio close" src="@/assets/img/trtc/icon-dismute.png" alt="" v-if="!userInfo.audio" />

          <img class="video open" src="@/assets/img/trtc/icon-startvideo.png" alt="" v-if="userInfo.video" />
          <img class="video close" src="@/assets/img/trtc/icon-stopvideo.png" alt="" v-if="!userInfo.video" />
          <div class="master-user">
            <img v-if="userInfo.isMasterSpeech && !userInfo.isMasterUser" class="open" src="@/assets/img/trtc/icon-keynote.png" alt="" />
            <img v-if="!userInfo.isMasterSpeech && !userInfo.isMasterUser" class="close" src="@/assets/img/trtc/icon-nokeynote.png" alt="" />
          </div>
        </div>
        <!-- 互动观众执行连麦操作时出现的按钮,结束连麦,邀请连麦,给别人麦等操作 -->
        <div class="setting-button" v-if="userRole == lnteractiveAudience">
          <!-- 正在连麦中的用户应当出现结束button -->
          <div class="end" v-if="userInfo.connectSpeechStatus == 3">
            <div class="button" v-if="type == 1">结束</div>
          </div>
          <!-- 其他人发起连麦,应当出现传麦按钮,并且出现何时申请时间 -->
          <div class="transmit" v-if="userInfo.connectSpeechStatus == 2">
            <div class="text">于四天前申请</div>
            <div class="button transmit-button" v-if="type == 1">传麦</div>
            <div class="button delete-button" v-if="type == 3">移除</div>
          </div>
          <!-- 没有连麦时,应当出现邀请按钮 -->
          <div class="invitation" v-if="userInfo.connectSpeechStatus == 1">
            <div class="text"></div>
            <div class="button invitation-button" v-if="type == 1">邀请</div>
            <div class="button delete-button" v-if="type == 3">移除</div>
          </div>
        </div>
        <!-- 互动成员选择框-只有从导播布局进入后才会显示 -->
        <div class="choose-members" v-if="type == 2">
          <div class="checkbox-line"></div>
          <el-checkbox size="medium" v-model="checked"></el-checkbox>
        </div>
      </div>
    </div>
    <div class="line" v-if="index + 1 != maxIndex">
      <span></span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    userInfo: {
      type: Object,
      default: {},
    },
    index: {
      type: Number,
      default: 0,
    },
    maxIndex: {
      type: Number,
      default: 1,
    },
    userRole: {
      stpe: String,
      default: "",
    },
    type: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      checked: false,
      lecturer: "lecturer", //讲师
      lnteractiveAudience: "lnteractiveAudience", //互动观众
    };
  },
  computed: {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="scss">
.members-box {
  .box {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    .left {
      display: flex;
      align-items: center;
      .head-img {
        position: relative;
        margin-right: 8px;
        .img {
          width: 40px;
          height: 37px;
          border-radius: 50%;
        }
        .icon {
          width: 18px;
          height: 18px;
          border-radius: 50%;
          position: absolute;
          right: -6px;
          bottom: 0px;
        }
      }
      .info {
        .top {
          display: flex;
          align-items: center;
          .name {
            font-size: 12px;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.65);
            line-height: 17px;
          }
          .status {
            display: flex;
            align-items: center;
            .text {
              margin-left: 8px;
              box-sizing: border-box;
              height: 17px;
              border: 1px solid #00a1e9;
              padding: 2px 5px;
              text-align: center;

              font-size: 10px;
              font-weight: 400;
              color: #00a1e9;
              line-height: 13px;
            }
            .master-speech,
            .connect {
              width: 11px;
              height: 10px;
              margin-left: 3px;
            }
          }
        }
        .bottom {
          margin-top: 2px;
          display: flex;
          align-items: center;

          font-size: 11px;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.5);
          line-height: 16px;
        }
      }
    }
    .right {
      display: flex;
      align-items: center;
      .on-time {
        font-size: 10px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.5);
        line-height: 14px;
      }
      .icon-list {
        //   width: 96px;
        display: flex;
        align-items: center;
        &.opacity05 {
          opacity: 0.5;
          img {
            cursor: auto !important;
          }
        }
        .audio {
          margin-left: 12px;
          cursor: pointer;
          height: 16px;
          width: auto;
          margin-right: 11px;
        }
        .video {
          width: 16px;
          cursor: pointer;
          height: auto;
          margin-right: 10px;
        }
        .master-user {
          width: 15px;
          height: 15px;
          img {
            cursor: pointer;
            width: 100%;
            height: 100%;
          }
        }
      }
      .setting-button {
        display: flex;
        align-items: center;
        .text {
          font-size: 10px;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.5);
          line-height: 14px;
        }
        .button {
          margin-left: 9px;
          line-height: 20px;
          text-align: center;
          font-size: 10px;
          font-weight: 500;
          padding: 0 6px;
          border-radius: 2px;
          cursor: pointer;
        }
        .end {
          .button {
            height: 20px;
            background: #e94642;
            color: #ffffff;
          }
        }
        .transmit {
          display: flex;
          align-items: center;
          .transmit-button {
            background: #00a1e9;
            color: #ffffff;
          }
        }
        .invitation-button {
          color: #ff9200;
          border: 1px solid #ff9200;
        }
        .delete-button {
          color: #e94642;
          border: 1px solid #e94642;
        }
      }
      .choose-members {
        display: flex;
        align-items: center;
        margin-left: 9px;
        .checkbox-line {
          width: 1px;
          height: 16px;
          background: #f0f0f0;
          margin-right: 8px;
        }
      }
    }
  }
  .line {
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    padding-left: 68px;
    box-sizing: border-box;
    span {
      display: block;
      width: 100%;
      background: #f0f0f0;
      height: 1px;
    }
  }
}
</style>
